<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>
	<canvas id="canvas" width="220" height="220"></canvas>
	
	<script>
		var canvas = document.getElementById('canvas'),
				context = canvas.getContext('2d'),  //获取画图环境，指明为2d
				centerX = canvas.width/2,   //Canvas中心点x轴坐标
				centerY = canvas.height/2,  //Canvas中心点y轴坐标
				rad = Math.PI*2/100, //将360度分成100份，那么每一份就是rad度
				speed = 0.1; //加载的快慢就靠它了 
		
		//绘制5像素宽的运动外圈
		function blueCircle(n){
			context.save();
			context.strokeStyle = "#333"; //设置描边样式
			context.lineWidth = 5; //设置线宽
			context.beginPath(); //路径开始
			//用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针false/逆时针true)
			context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false);
			context.stroke();  //绘制
			context.closePath(); //路径结束
			context.restore();
		}
			
		//绘制白色外圈
		function whiteCircle(){
			context.save();
			context.beginPath();   //新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
			context.lineWidth = 2; //设置线宽
			context.strokeStyle = "red";
			context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
			context.stroke();      //通过线条来绘制图形轮廓
			context.closePath();   //闭合路径之后图形绘制命令又重新指向到上下文中
			context.restore();     //恢复最近一近的画布保存状态
		}
		
		//百分比文字绘制
		function text(n){
			context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
			context.strokeStyle = "#000"; //设置描边样式
			context.font = "40px Arial"; //设置字体大小和字体
			//绘制字体，并且指定位置
			context.strokeText(n.toFixed(0)+"%", centerX-25, centerY+10);
			context.textAlign="center";
			context.textBaseline="middle";
			context.restore();
		}
		
		//动画循环
		(function drawFrame(){
			window.requestAnimationFrame(drawFrame);
			context.clearRect(0, 0, canvas.width, canvas.height);
			whiteCircle();
			text(speed);
			blueCircle(speed);
			if(speed > 100) speed = 0;
			speed += 0.1;
		}());
		
		
	</script>
</body>
</html>